<template>
	<!-- 未引用页面 2024.12.31 -->
	<view class="reservation-status">
		<view v-for="item in goods" :key="item.id">
			<view class="card shop">
				<view class="shop-title">服务门店</view>
				<view class="shop-container">
					<view class="img">
						<image :src="$wanlshop.oss(item.store.store_avatar, 0, 88)" />
					</view>
					<view class="shop-content">
						<view class="stop-name">{{ item.store.store_name }}</view>
						<view class="stop-address">{{ item.store.address }}</view>
						<view class="btn">
							<view class="addr-btn" @tap="shopMap(item.store)">导航</view>
							<view class="phone-btn" @tap="$wanlshop.phone(item.store.store_phone)">电话</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="card rules">
			<view class="label-text order-num">
				<view class="label">订单编号：</view>
				<view class="text">
					<text>{{ orderNo }}</text>
					<view class="copy" @tap="copyOrder(orderNo)">复制</view>
				</view>
			</view>
			<view class="label-text">
				<view class="label">订单时间：</view>
				<view class="text">
					<text>{{ paymenttime }}</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">购买产品：</view>
				<view class="text">
					<text>{{ goodsName }}</text>
				</view>
			</view>
			<!-- <view class="label-text">
          <view class="label">支付方式：</view>
          <view class="text">
            <text>xxxxxxxxx</text>
          </view>
        </view> -->
			<view class="label-text">
				<view class="label">支付状态：</view>
				<view class="text">
					<text>{{ status }}</text>
				</view>
			</view>
		</view>

		<view class="footer">
			<button @tap="toEvaluate(orderId, 'service')">立即评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderGoodsId: '',

				code: "",
				time: "",
				address: "",
				shopName: "",
				mobile: "",
				orderNo: "",
				paymenttime: "",
				goodsName: "",
				state: "",
				shopImg: "/uploads/20240813/800715de8b79b5b304bd7ed5bb2ea807.png",
				orderGoodsId: "",
				shop: {},
				status: '',

				goods: []
			};
		},
		onLoad(option) {
			let {
				orderId,
				orderGoodsId
			} = option
			this.orderId = orderId
			this.orderGoodsId = orderGoodsId
			this.getOrderApi(orderId)
		},
		methods: {
			// 复制
			copyOrder(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					}
				})
			},
			shopMap(store) {
				let {
					address,
					store_name,
					latitude,
					longitude
				} = store
				let data = {
					name: store_name,
					addr: address,
					latitude: latitude,
					longitude: longitude
				}
				let str = Object.keys(data).map(key => {
					return `${key}=${data[key]}`
				}).join('&')
				this.$wanlshop.to(`/pages/service/select_shop_map?${str}`)
			},
			// 获取订单
			async getOrderApi(order_id) {
				let res = await this.$api.get({
					url: "/wanlshop/order/getOrderInfo",
					data: {
						id: order_id,
					}
				})
				this.goods = res.goods.filter(item => item.id == this.orderGoodsId)

				this.code = res.goods[0]?.service_code || ''
				this.goodsName = res.goods[0]?.title || ''
				this.orderGoodsId = res.goods[0].id
				this.address = res.address.address || ''
				this.shopName = res.shop.shopname || ""
				this.mobile = res.address.mobile || ''
				this.status = res.logistics.status

				this.orderNo = res.order_no || ''
				this.paymenttime = res.paymenttime_text
				this.state = res.state
			},
		}
	};
</script>

<style scoped lang="scss">
	.reservation-status {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 0 15rpx;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;

		button {
			border-radius: 80rpx;
			background: orange;
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			margin-right: 25rpx;
			font-size: 30rpx;
		}
	}

	.card {
		background: #fff;
		border-radius: 10rpx;
		padding: 25rpx 15rpx;
		margin-bottom: 20rpx;
	}

	.shop {
		.shop-title {
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 8rpx;
		}

		.shop-container {
			display: flex;
			align-items: center;
			height: auto;

			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
				background: red;
				overflow: hidden;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.shop-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.stop-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #000;
					margin-bottom: 10rpx;
				}

				.stop-address {
					font-size: 24rpx;
					color: #ccc;
					margin-bottom: 15rpx;
					flex: 1;
				}

				.btn {
					display: flex;
					align-items: center;

					.phone-btn,
					.addr-btn {
						font-size: 20rpx;
						padding: 3rpx 10rpx;
						border: 1rpx solid #000;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.rules {
		.label-text {
			display: flex;

			&.order-num {
				align-items: center;

				.text {
					align-items: center;
					display: flex;

					.copy {
						margin-left: 20rpx;
						font-size: 18rpx;
						background: rgba(#999, 0.5);
						padding: 3rpx 8rpx;
						border-radius: 5rpx;
						color: #333;
					}
				}
			}

			.label,
			text {
				line-height: 40rpx;
				color: #000;
				font-size: 24rpx;
			}
		}
	}
</style>